<!-- @format -->

<template>
  <view class="storeIntro">
    <child-header-bar :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="storeIntro-content" :style="[{ top: top + 'px' }]">
      <view class="sc-swiper">
        <view class="swiper-box">
          <swiper class="uni-swiper-wrapper" indicator-dots circular autoplay interval="3000">
            <swiper-item class="index-swiper-item" @click="toViewLargeImg(index)" v-for="(item, index) in swiperList"
              :key="index">
              <image class="i-image" :src="item"></image>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <view class="sc-store-detail">
        <view class="store-name">
          {{
            storeBusinessInfo.bussinessName
              ? storeBusinessInfo.bussinessName
              : '-'
          }}
        </view>
        <view class="store-type">
          <image :src="typeImgUrl" mode=""></image>
        </view>
        <view class="address-link">
          <view class="address">
            {{ storeBusinessInfo.address ? storeBusinessInfo.address : '-' }}
          </view>
        </view>

		<view class="sps-pos" style="margin-top: 10rpx;">
		  <image src="/myPackageA/static/storeIntro/greenPos.png" mode=""></image>
		  <view class="hi-distance">
		    {{ storeBusinessInfo.slopeName }}
		  </view>
		</view>
        <view class="link" >
          <view class="l-position" @click="getPosition()">
            <image src="/myPackageA/static/storeIntro/position.png" mode=""></image>
            <view class="lp-title"> 导航 </view>
          </view>
          <view class="l-phone" @click="getPhone()">
            <image src="/myPackageA/static/storeIntro/phone.png" mode=""></image>
            <view class="lp-title"> 电话 </view>
          </view>
          <view class="l-jump" @click="toXC()" v-if="storeBusinessInfo.externalLink" style="width: 140rpx;">
            <image src="/myPackageA/static/storeIntro/jump.png" mode=""></image>
            <view class="lp-title"> 在线预订 </view>
          </view>
        </view>
      </view>
      <view class="sc-store-atricle">
        <rich-text class="ql-editor" :nodes="replaceContent(storeBusinessInfo.bussinessIntroduce)"
          v-if="storeBusinessInfo.bussinessIntroduce"></rich-text>
        <view class="" v-else> 暂无 </view>
      </view>
    </view>
  </view>
</template>

<script>
  // 商家类别
  let storeTypes = new Map([
    [2, 'canyin'],
    [3, 'zhusu'],
    [4, 'jiaotong'],
    [5, 'jiaoxue'],
    [6, 'xueju'],
    [7, 'sheying'],
    [9, 'qita'],
  ])

  export default {
    data() {
      return {
        paramId: '',
        typeImgUrl: '',
        type: '', //数据传来的类型
        top: 0, //距离顶部距离
        storeBusinessInfo: {}, //商家基础信息
        childTitle: '商家介绍', //标题
        swiperList: [], //轮播图数据
      }
    },
    onLoad(options) {
      if (options.id) {
        this.paramId = options.id
      }
      if (options.businessId) {
        this.paramId = options.businessId
      }
      this.getStoreInfo()
    },
    methods: {
		onShareAppMessage() {
		return {
		    title: '商家介绍',
		    imageUrl: this.img,
		  }
		},
		onShareTimeline() {
		  return {
		    title: '商家介绍',
		    imageUrl: this.img,
		  }
		},
      // 点击查看大图
      toViewLargeImg(index) {
        let url = []
        for (let i = 0; i < this.swiperList.length; i++) {
          url.push(this.swiperList[i])
        }
        console.log(url)
        uni.previewImage({
          current: index, //预览图片的下标
          urls: url //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
        })
      },
      // 富文本添加列表边框样式
      replaceContent(content) {
        // console.log(content)
        if (content) {
          content = content.replace(/\<img/gi, '<img class="imgColor" ') //正则替换
          return content;
        } else {
          return null;
        }
      },
      toXC() {
        wx.navigateToMiniProgram({
          appId: 'wx0e6ed4f51db9d078', //appid
          path: this.storeBusinessInfo.externalLink, //path
          envVersion: 'release', //开发版develop 开发版 trial 体验版 release 正式版
          success(res) {
            console.log('成功')
          },
        })
      },
      // 获取商家数据
      getStoreInfo() {
        let _this = this
        uni.request({
          url: _this.$httpApi.install.getBusinessInfo + this.paramId,
          method: 'GET',
          success(res) {
            if (res.data.code == 200) {
				     console.log('aaaaaaaaaaaaaaaaaaaaaa')
              console.log(res)
              _this.storeBusinessInfo = res.data.data

              _this.typeImgUrl =
                '/myPackageA/static/storeIntro/store-' +
                storeTypes.get(_this.storeBusinessInfo.bussinessType) +
                '.png'
              _this.getSwiperList()
            } else {
              console.log(res.msg)
            }
          },
          fail(error) {},
        })
      },
      // 获取轮播图数据
      getSwiperList() {
        let _this = this
        if (_this.storeBusinessInfo.bussinessImg) {
          _this.swiperList = _this.storeBusinessInfo.bussinessImg.split(',')
        }
      },
      // 导航点击
      getPosition() {
        console.log(this.storeBusinessInfo)
        if (!this.storeBusinessInfo.positionX || !this.storeBusinessInfo.positionY) {
          uni.showToast({
            title: '暂无导航数据',
          })
          return
        }
       // let pos = this.slopeIntro.position.split(',')
        let lat = this.storeBusinessInfo.positionY
        let lng = this.storeBusinessInfo.positionX
        //打开地图，并将门店位置传入
        uni.getLocation({
          success: (res) => {
            console.log('location success', parseFloat(lat), parseFloat(lng))
            uni.openLocation({
              latitude: parseFloat(lat),
              longitude: parseFloat(lng),
              scale: 18,
            })
          },
        })
      },
      getPhone() {
        // 电话号码待添加
        let phoneNumList = []
        if (!this.storeBusinessInfo.phone) {
          uni.showToast({
            title: '暂无电话数据',
            icon: 'none'
          })
          return
        }
        phoneNumList = this.storeBusinessInfo.phone.split(',')
        uni.showActionSheet({
          itemList: phoneNumList,
          success: (res) => {
            let phoneNum = phoneNumList[res.tapIndex]
            this.toMakePhoneCall(phoneNum)
          },
          fail: (err) => {
            console.log('弹窗取消')
          },
        })
      },
      // 拨打电话
      toMakePhoneCall(phoneNum) {
        wx.makePhoneCall({
          phoneNumber: phoneNum,
          success: function() {
            console.log('拨打电话成功！')
          },
          fail: function() {
            console.log('拨打电话失败！')
          },
        })
      },

      // 动态接收导航栏高度
      getMarginTop(marginTop) {
        this.top = marginTop ? marginTop : 150
      },
    },
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
    background-color: #f8fafe;
  }
  .imgColor {
    max-width: 100%;
    height: auto;
  }
</style>
<style lang="scss">

  .storeIntro-content {
    position: absolute;
    padding: 0 30rpx;

    // 头部轮播图
    .sc-swiper {

      // 轮播图
      .swiper-box {
        margin-top: 10rpx;
        width: 100%;

        .uni-swiper-wrapper {
          width: 690rpx;
          height: 340rpx;

          /deep/ .wx-swiper-dot {
            // 指示点元素默认样式
            width: 16rpx !important;
            height: 16rpx !important;
            background: #64787b !important;
            border-radius: 50%;
          }

          /deep/ .wx-swiper-dot-active {
            // 指示点元素激活（当前选中）状态样式
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            width: 63rpx !important;
            height: 16rpx !important;
            background-color: #303030 !important;
          }

          .index-swiper-item {
            border-radius: 20rpx;

            .i-image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .sc-store-detail {
      width: 690rpx;
      // height: 198rpx;
      background: #eff1f4;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin-top: 17rpx;
      padding: 27rpx 20rpx 30rpx 20rpx;

      img {
        width: 100rpx;
        height: 100rpx;
      }

      .store-name {
        font-size: 40rpx;
        font-weight: 500;
        color: #303030;
      }

      .store-type {
        margin-top: 20rpx;
        width: 101rpx;
        height: 38rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .address-link {
        margin-top: 10rpx;
        display: flex;
        justify-content: space-between;

        .address {
          font-size: 24rpx;
          color: #303030;
        }
      }

      .link {
        display: flex;
        margin-top: 65rpx;

        image {
          width: 20rpx;
          height: 20rpx;
        }

        .lp-title {
          font-size: 24rpx;
          font-weight: bold;
          color: #464646;
          margin-left: 5rpx;
        }

        .l-position {
          width: 101rpx;
          height: 34rpx;
          background: linear-gradient(90deg,
              rgba(93, 135, 237, 0.15) 0%,
              rgba(239, 241, 244, 0.15) 100%);
          border-radius: 17rpx 17rpx 17rpx 17rpx;
          display: flex;
          align-items: center;
          padding-left: 15rpx;
        }

        .l-phone {
          width: 103rpx;
          height: 34rpx;
          background: linear-gradient(90deg,
              rgba(93, 237, 155, 0.15) 0%,
              rgba(239, 241, 244, 0.15) 100%);
          border-radius: 17rpx 17rpx 17rpx 17rpx;
          display: flex;
          align-items: center;
          padding-left: 15rpx;
          margin-left: 56rpx;
        }

        .l-jump {
          width: 103rpx;
          height: 34rpx;
          background: linear-gradient(90deg,
              rgba(237, 108, 93, 0.15) 0%,
              rgba(244, 241, 239, 0.15) 100%);
          border-radius: 17rpx 17rpx 17rpx 17rpx;
          display: flex;
          align-items: center;
          padding-left: 15rpx;
          margin-left: 240rpx;
        }
      }
    }

    .sc-store-atricle {
      width: 690rpx;
      margin-top: 20rpx;
      padding: 30rpx 20rpx;
      margin-bottom: 20rpx;
      border-radius: 20rpx;
      background-color: #fff;
    }
  }
  .sps-pos {
    background: #303030;
    border-radius: 18rpx 18rpx 18rpx 18rpx;
    display: flex;
    align-items: center;
    position: absolute;

    padding: 5rpx 16rpx 5rpx 6rpx;
  
    image {
      width: 24rpx;
      height: 26rpx;
    }
  
    .hi-distance {
      margin-left: 5rpx;
      font-size: 24rpx;
      color: #88f79c;
    }
  }
</style>